<template>
    <div>
        <!-- 共用头部组件 -->
        <common-header
            headerTitle="我的订单"
            :hasBack="true"
            :hasHome="true"
        ></common-header>
        <!-- 共用头部组件 -->

        <!-- 订单导航栏 -->
        <div class="order-nav">
            <div
                class="nav-item"
                v-for="(item,index) of navList"
                :key="index"
                :class="orderType == index ? 'active':''"
                @click="changeOrderType(item.orderType)"
            >{{item.navName}}</div>
        </div>
        <!-- 订单导航栏 -->

        <!-- 共用页面滚动组件 -->
        <common-scroll
            :scrollStyle="scrollStyle"
            :isLoadMore="true"
            :data="orderList"
            @pullup="loadMore"
        >

            <div
                class="order-empty-tips"
                v-if="orderList.length == 0"
            >{{emptyTips}}</div>

            <!-- 订单列表组件 -->
            <div
                class="order-item"
                v-for="(items,indexs) of orderList"
                :key="indexs"
                @click="goDetail(items.id)"
            >
                <div class="order-num-status">
                    <div class="order-num">订单号 <span>{{items.sn}}</span></div>
                    <div class="order-status">{{navList[items.order_type].navName}}</div>
                </div>
                <div
                    class="goods-info"
                    v-for="(item,index) of items.goods_list"
                    :key="index"
                >
                    <div class="goods-img-box">
                        <img
                            class="goods-img"
                            :src="item.imgs"
                        />
                    </div>
                    <div class="goods-info-box">
                        <div class="goods-name">{{item.title}}</div>
                        <div class="goods-format">
                            <span v-if="item.attr_values">{{item.attr_values+'，'}}</span>
                            <span>{{item.num+'件'}}</span>
                        </div>
                        <div class="goods-price">￥{{item.price_market | currency}}</div>
                    </div>
                </div>
                <div class="order-info">共{{items.goods_list.length}}件商品 合计：￥{{items.money_total | currency}}</div>
                <div
                    class="order-btn-box"
                    v-if="items.order_type == 1 || items.order_type == 3 || items.order_type == 4"
                >
                    <span
                        class="order-btn cancle"
                        v-if="items.order_type == 1"
                        @click.stop="orderCancle(items.id)"
                    >取消订单</span>
                    <span
                        class="order-btn logistics"
                        v-if="items.order_type == 3 || items.order_type == 4"
                        @click.stop="checkLogistics(items.id)"
                    >查看物流</span>
                    <span
                        class="order-btn review"
                        v-if="items.order_type == 4"
                        @click.stop="goComment(items.id)"
                    >马上评价</span>
                    <span
                        class="order-btn pay"
                        v-if="items.order_type == 1"
                        @click.stop="goPay(items.name,items.id,items.money_total)"
                    >付款</span>
                    <span
                        class="order-btn confirm"
                        v-if="items.order_type == 3"
                        @click.stop="receiveConfirm(items.id)"
                    >确认收货</span>
                </div>
            </div>
            <!-- 订单列表组件 -->

        </common-scroll>
        <!-- 共用页面滚动组件 -->
    </div>
</template>

<script>
import CommonHeader from '@/components/Header'
import CommonScroll from '@/components/Scroll'
export default {
    name: 'OrderList',
    components: {
        CommonHeader,
        CommonScroll
    },
    data() {
        return {
            scrollStyle: {
                top: '2.26rem',
                left: '0',
                right: '0',
                bottom: '0'
            },
            navList: [
                {
                    orderType: 0,
                    navName: '全部'
                },
                {
                    orderType: 1,
                    navName: '待付款'
                },
                {
                    orderType: 2,
                    navName: '待发货'
                },
                {
                    orderType: 3,
                    navName: '待收货'
                },
                {
                    orderType: 4,
                    navName: '已完成'
                },
                {
                    orderType: 5,
                    navName: '已取消'
                }
            ],
            userInfo: '',
            orderType: 0,
            orderList: [],
            nowPage: 1,
            totalPage: 1,
            isLoading: false,
            emptyTips: '正在全力加载中...'
        }
    },
    mounted() {
        this.orderType = this.$route.query.orderType
        this.getOrderList()
        this.getUserInfo()
    },
    methods: {
        getUserInfo() {
            this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
        },
        changeOrderType(value) {
            if (this.isLoading) {
                return
            }
            this.orderType = value
            this.emptyTips = '正在全力加载中...'
            this.nowPage = 1
            this.totalPage = 1
            this.orderList = []
            this.getOrderList()
        },
        getOrderList() {
            this.isLoading = true
            let postData = this.qs.stringify({
                order_type: this.orderType,
                page_size: 10,
                page: this.nowPage
            })
            this.axios.post('/api/orders/list.json', postData).then(res => {
                const data = res.data
                if (data.status == 1) {
                    if (data.data.list.length == 0) {
                        this.emptyTips = '暂无订单'
                    }
                    this.orderList = this.orderList.concat(data.data.list)
                    this.totalPage = Math.ceil(data.data.page_info.total / 10)
                    this.nowPage++
                    this.isLoading = false
                } else {
                    this.commonDialog.alert('提示', data.msg)
                }
            })
        },
        loadMore() {
            if (this.totalPage >= this.nowPage && this.isLoading == false) {
                this.getOrderList()
            }
        },
        goDetail(id) {
            this.$router.push({
                path: '/orderDetail',
                query: { orderId: id }
            })
        },
        goPay(name, id, money) {
            const that = this
            if (name == '') {
                this.commonDialog.alert('提示', '请选择收货地址', function() {
                    that.$router.push({
                        path: '/address',
                        query: {
                            addressType: 'groupOrder',
                            orderId: id
                        }
                    })
                })
                return
            }
            sessionStorage.setItem('cart_price', JSON.stringify(money))
            this.$router.push({
                path: '/goPay',
                query: { orderId: id }
            })
        },
        checkLogistics(id) {
            this.$router.push({
                path: '/logistics',
                query: { orderId: id }
            })
        },
        goComment(id) {
            this.$router.push({
                path: '/commentList',
                query: { orderId: id }
            })
        },
        refund(id) {
            this.$router.push({
                path: '/refund',
                query: { orderId: id }
            })
        },
        orderCancle(id) {
            const that = this
            this.commonDialog.confirm('提示', '确定取消该订单？', function() {
                let postData = that.qs.stringify({
                    id: id
                })
                that.axios
                    .post('/api/orders/cancel.json', postData)
                    .then(res => {
                        const data = res.data
                        if (data.status == 1) {
                            that.commonDialog.alert('提示', '成功取消订单')
                            that.orderType = 5
                            that.emptyTips = '正在全力加载中...'
                            that.nowPage = 1
                            that.totalPage = 1
                            that.orderList = []
                            that.getOrderList()
                        } else {
                            that.commonDialog.alert('提示', data.msg)
                        }
                    })
            })
        },
        receiveConfirm(id) {
            let postData = this.qs.stringify({
                id: id
            })
            this.axios.post('/api/orders/received.json', postData).then(res => {
                const data = res.data
                if (data.status == 1) {
                    this.$router.push({
                        path: '/receiveConfirm',
                        query: { orderId: id }
                    })
                } else {
                    this.commonDialog.alert('提示', data.msg)
                }
            })
        }
    },
    filters: {
        currency(value) {
            return parseFloat(value / 100).toFixed(2)
        }
    }
}
</script>

<style lang="stylus" scoped>
.order-empty-tips
    height 2rem
    line-height 2rem
    text-align center
    font-size 0.33rem
    color #999
.order-nav
    display flex
    justify-content space-between
    padding 0 0.32rem
    background #fff
    border-bottom 1px solid #eee
    .nav-item
        height 1.14rem
        line-height 1.14rem
        font-size 0.38rem
        color #333
        box-sizing border-box
    .active
        color #4b866e
        border-bottom 2px solid #4b866e
.order-item
    background #fff
    margin-bottom 0.18rem
    .order-num-status
        display flex
        align-items center
        justify-content space-between
        height 1.11rem
        padding 0 0.32rem
        border-bottom 1px solid #eee
        box-sizing border-box
        .order-num
            font-size 0.37rem
            color #888
            span
                color #131313
        .order-status
            font-size 0.37rem
            color #4b866e
    .goods-info
        display flex
        align-items center
        height 2.68rem
        padding 0 0.32rem
        .goods-img-box
            width 2.13rem
            height 2.13rem
            overflow hidden
            box-sizing border-box
            .goods-img
                width 100%
                height 100%
        .goods-info-box
            flex 1
            min-width 1px
            margin-left 0.18rem
            .goods-name
                line-height 1.3
                font-size 0.35rem
                color #323232
                white-space nowrap
                overflow hidden
                text-overflow ellipsis
            .goods-format
                margin-top 0.18rem
                font-size 0.29rem
                color #888
                line-height 1.3
                overflow hidden
                white-space nowrap
                text-overflow ellipsis
            .goods-price
                margin-top 0.18rem
                font-weight bold
                font-size 0.4rem
                color #d7463c
    .order-info
        text-align right
        padding 0.29rem 0.32rem
        font-size 0.37rem
        color #323232
        line-height 1
        border-bottom 1px solid #eee
    .order-btn-box
        display flex
        align-items center
        justify-content flex-end
        height 1.31rem
        padding 0 0.32rem
        .order-btn
            width 1.86rem
            height 0.66rem
            line-height 0.7rem
            font-size 0.35rem
            color #4b866e
            text-align center
            border 1px solid #4b866e
            border-radius 5px
            margin-left 0.4rem
        .cancle
            color #323232
            border-color #fff
        .logistics
            color #323232
            border-color #888
</style>

